<!-- * 文件名：我的
* 作者：ZQK
* 描述：〈描述〉
* 修改人：ZQK
* 修改时间：2025-3-8  -->
<template>
	<view class="homePage">
		<view class="homeTop">
			<topbar title="我的" position="absolute"></topbar>
			<view class="mimeInfoBox">
				<view class="mimeInfo">
					<view class="mimeInfoImg">
						<image :src="userInfo.avatar?userInfo.avatar:getUrl('/missing-face.png')" mode="heightFix"></image>
					</view>
					<view class="mimeInfoRight">
						<view class="mimeInfoName">
							<view class="mimeInfoNameText" @click="skipTo('/pages/userInfo/userInfo')" v-if="userInfo.nickName">{{userInfo.nickName}}</view>
							<view class="mimeInfoNameText" @click="skipToLogin()" v-else>请登录</view>
							<view class="mimeInfoNameBtn" @click="skipTo('/pages/userInfo/userInfo')" v-if="userInfo.nickName">
								<image :src="getUrl('/mine_update.png')" mode="widthFix"></image>
							</view>
						</view>
						<view class="mimeInfoPhone">{{userInfo.phonenumber}}</view>
					</view>
				</view>
				<view class="partner" v-if="userInfo.leaderStatus == '1'">
					<image :src="getUrl('/partner_btn.png')" mode="widthFix"></image>
				</view>
				<view class="partner" v-if="userInfo.leaderStatus == '2'">
					<image :src="getUrl('/team_btn.png')" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<view class="content">
			
			<view class="commissionImage" @click="skipTo('/pages/partner/partner')" v-if="userInfo.leaderStatus == '0'">
				<image class="commissionBg" :src="getUrl('/commission.png')" mode="widthFix"></image>
				<image class="commissionBtn" :src="getUrl('/commission_btn.png')" mode="widthFix"></image>
			</view>
			<view class="commissionBox" v-else>
				<view class="commissionText">佣金余额</view>
				<view class="commissionBottom">
					<view class="commissionMoney">￥{{commission}}</view>
					<view class="commissionBtn" @click="skipTo('/pages/withdrawal/withdrawal')">提现</view>
				</view>
			</view>
			
			<view class="noticeBox" @click="skipTo('/pages/notice/notice')">
				<view class="noticeBoxLeft">通知</view>
				<view class="noticeBoxRight">
					<view class="noticeBoxText">
						<u-notice-bar 
						style="width: 500rpx;"
						:autoplay="true" 
						:volume-icon="false" 
						type="none" 
						mode="vertical"
						:list="noticeList"></u-notice-bar>
					</view>
					<view class="noticeBoxArrow">
						<u-icon name="arrow-right" size="32"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="userTabs" v-if="userInfo.leaderStatus != '0'">
				<view v-if="userInfo.leaderStatus == '1'" class="userTab userTab1" @click="skipTo('/pages/inviteUsers/inviteUsers')">
					<view class="userTabText1">邀请用户</view>
				</view>
				<view class="userTab userTab2" @click="skipTo('/pages/recruitingMembers/recruitingMembers')">
					<view class="userTabText1">团队招募</view>
				</view>
				<view v-if="userInfo.leaderStatus == '1'" class="userTab userTab3" @click="skipTo('/pages/myUsers/myUsers')">
					<view class="userTabText2">我的用户</view>
				</view>
				<view class="userTab userTab4" @click="skipTo('/pages/myTeam/myTeam')">
					<view class="userTabText2">我的团队</view>
				</view>
			</view>
			
			<view class="service">
				<view class="serviceTitle">其他服务</view>
				<view class="serviceContent">
					<view
					class="serviceItem"
					@click="handleService(index)"
					v-for="(item, index) in serviceList"
					:key="index">
						<image :src="item.image" mode=""></image>
						<view class="serviceItemText">{{item.title}}</view>
					</view>
				</view>
			</view>
			
			<view class="saveMoney" v-if="false">
				<view class="saveMoneyTop">
					<view class="saveMoneyTopTitle">已省</view>
					<view class="saveMoneyTopDetail">
						<text>详情</text>
						<u-icon name="arrow-right" color="#757575;" size="28"></u-icon>
					</view>
				</view>
				<view class="saveMoneyBottom">
					<view class="saveMoneyItem">
						<view class="saveMoneyItemTop">
							<text class="saveMoneyItemTopNum">30</text>
							<text class="saveMoneyItemTopText">元</text>
						</view>
						<view class="saveMoneyItemBottom">本月已省</view>
					</view>
					<view class="vertical"></view>
					<view class="saveMoneyItem">
						<view class="saveMoneyItemTop">
							<text class="saveMoneyItemTopNum">100</text>
							<text class="saveMoneyItemTopText">元</text>
						</view>
						<view class="saveMoneyItemBottom">累计已省</view>
					</view>
				</view>
			</view>
		</view>
		
		<tabfooter :active='3'></tabfooter>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onShow, onLoad } from "@dcloudio/uni-app"
	import topbar from '@/components/topbar/index.vue'
	import tabfooter from '@/components/footer/index.vue'
	import { useTabbar } from '@/hooks/useTabbar.ts'
	import { getUrl } from '@/utils/imagePlugin'
	import Api from '@/api/modules/home.ts'
	useTabbar()
	interface serviceListItemInterface {
		title: string
		image: string
		url: string
	}
	
	const serviceList = ref<Array<serviceListItemInterface>>([
		{ title: '意见反馈', image: getUrl('/serviceItem_01.png'), url: '' },
		{ title: '用户协议', image: getUrl('/serviceItem_02.png'), url: '' },
		{ title: '版本更新', image: getUrl('/serviceItem_03.png'), url: '' },
		{ title: '在线客服', image: getUrl('/serviceItem_04.png'), url: '' },
	])
	
	let userInfo = ref<any>({
		avatar: '',
		nickName: '',
		phonenumber: '',
		leaderStatus: '',   // 1合伙人 2团员 ‘’普通
	})
	
	const getInfo = () => {
		Api.getInfo().then((res: any) => {
			userInfo.value = res.user
		})
	}
	
	let commission = ref<string>('0')
	const getUserBalance = () => {
		Api.getUserBalance().then((res: any) => {
			commission.value = res.data.balance
		})
	}
	
	const handleService = (index: number) => {
		if(index === 0){
			if(userInfo.value?.nickName){
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				})
			}
		} else if(index === 1){
			if(userInfo.value?.nickName){
				uni.navigateTo({
					url: '/pages/document/document?type=用户协议'
				})
			}
		} else if(index === 2){
			uni.showToast({ title: '已是最新版本！', icon: 'none' })
		} else if(index === 3){
			uni.showToast({ title: '敬请期待！', icon: 'none' })
		}
	}
	
	let noticeList = ref<Array<any>>([])
	const getNoticeList = () => {
		Api.getNoticeList().then((res: any) => {
			noticeList.value = []
			if(res.rows.length > 0){
				for (let i = 0; i < res.rows.length; i++) {
					noticeList.value.push(res.rows[i].noticeTitle)
				}
			} else {
				noticeList.value = ['暂无']
			}
		})
	}
	
	const skipToLogin = () => {
		uni.navigateTo({
			url: '/pages/wxLogin/wxLogin'
		})
	}
	const skipTo = (url: string) => {
		if(userInfo.value?.nickName){
			uni.navigateTo({
				url: url
			})
		}
	}
	
	onShow(()=>{
		getInfo()
		getUserBalance()
		getNoticeList()
	})
</script>

<style scoped lang="scss">
	.homePage {
		position: relative;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F8FAFC;
		
		.homeTop{
			height: 480rpx;
			background-image: url(#{$imgurl}+'/mine_bg.png');
			background-size: 100% 100%;
			
			.mimeInfoBox{
				width: 100%;
				margin-top: 200rpx;
				padding-left: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.mimeInfo{
					display: flex;
					align-items: center;
					
					.mimeInfoImg{
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						margin-right: 30rpx;
						background-color: #ccc;
						position: relative;
						overflow: hidden;
						
						image {
							height: 100%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
					
					.mimeInfoRight{
						color: #ffffff;
						
						
						.mimeInfoName{
							font-size: 32rpx;
							font-weight: 600;
							display: flex;
							align-items: center;
							margin-bottom: 8rpx;
							
							.mimeInfoNameText{
								margin-right: 40rpx;
							}
							
							.mimeInfoNameBtn{
								display: flex;
								align-items: center;
								justify-content: center;
								
								image{
									margin-top: 2rpx;
									width: 32rpx;
									height: 32rpx;
								}
							}
						}
						
						.mimeInfoPhone{
							font-size: 24rpx;
						}
					}
				}
						
				.partner{
					
					image{
						width: 130rpx;
						height: 64rpx;
					}
				}
			}
		}
		
		.content{
			flex: 1;
			position: relative;
			margin-top: -120rpx;
			padding: 0 32rpx;
			overflow: auto;
			
			.commissionBox{
				margin-bottom: 32rpx;
				padding: 32rpx 40rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.03);
				
				.commissionText{
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 10rpx;
				}
				
				.commissionBottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.commissionMoney{
						color: #F35F25;
						font-weight: 600;
						font-size: 48rpx;
					}
					
					.commissionBtn{
						display: flex;
						justify-content: center;
						align-items: center;
						background: #60B848;
						color: #ffffff;
						border-radius: 56rpx;
						width: 160rpx;
						height: 56rpx;
						font-size: 28rpx;
						font-weight: 600;
					}
				}
			}
			
			.commissionImage{
				margin-bottom: 32rpx;
				padding: 32rpx 40rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.03);
				overflow: hidden;
				height: 150rpx;
				position: relative;
				
				.commissionBg{
					width: 100%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				
				.commissionBtn{
					position: absolute;
					top: 60rpx;
					right: 40rpx;
					z-index: 40;
					width: 160rpx;
				}
			}
			
			.noticeBox{
				margin-bottom: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #3D3D3D;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.03);
				
				.noticeBoxLeft{
					padding: 10rpx 20rpx;
					background: #D7EBD5;
					border-radius: 20rpx 0 0 20rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.noticeBoxRight{
					border-radius: 0 20rpx 20rpx 0;
					flex: 1;
					background-color: #ffffff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 60rpx;
					
					.noticeBoxText{
						flex: 1;
						padding: 0 10rpx;
					}
					
					.noticeBoxArrow{
						width: 40rpx;
					}
				}
			}
			
			.userTabs{
				margin-bottom: 32rpx;
				border-radius: 20rpx;
				background: #DAEDD4;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.03);
				padding: 10rpx 10rpx 0;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				.userTab{
					margin-bottom: 10rpx;
					width: 49%;
					height: 100rpx;
					background-size: 100% 100%;
					position: relative;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					
					.userTabText1{
						border-radius: 50rpx;
						background: linear-gradient(107deg, #EE772C 9%, #FF9860 89%);
						box-shadow: 0px 1px 5px 0px rgba(220, 113, 47, 0.35);
						color: #FFFFFF;
						font-size: 24rpx;
						padding: 8rpx 16rpx;
						margin-right: 24rpx;
					}
					
					.userTabText2{
						border-radius: 50rpx;
						background: linear-gradient(107deg, #60B848 9%, #85D976 89%);
						box-shadow: 0px 1px 5px 0px #85D976;
						color: #FFFFFF;
						font-size: 24rpx;
						padding: 8rpx 16rpx;
						margin-right: 24rpx;
					}
				}
				
				.userTab1{
					background-image: url(#{$imgurl}+'/userTab_01.png');
				}
				
				.userTab2{
					background-image: url(#{$imgurl}+'/userTab_02.png');
				}
				
				.userTab3{
					background-image: url(#{$imgurl}+'/userTab_03.png');
				}
				
				.userTab4{
					background-image: url(#{$imgurl}+'/userTab_04.png');
				}
			}
			
			.service{
				margin-bottom: 32rpx;
				padding-bottom: 32rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.03);
				
				.serviceTitle{
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
					padding: 28rpx;
				}
				
				.serviceContent{
					display: flex;
					justify-content: space-around;
					align-items: center;
					
					.serviceItem{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						
						image{
							width: 80rpx;
							height: 80rpx;
						}
						
						.serviceItemText{
							font-size: 22rpx;
							color: #666666;
						}
					}
				}
			}
			
			.saveMoney{
				margin-bottom: 32rpx;
				padding: 32rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.03);
				
				.saveMoneyTop{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 32rpx;
					
					.saveMoneyTopTitle{
						font-size: 36rpx;
						font-weight: 600;
						color: #333333;
					}
					
					.saveMoneyTopDetail{
						font-size: 28rpx;
						color: #757575;
					}
				}
				
				.saveMoneyBottom{
					border-radius: 20px;
					background: linear-gradient(180deg, #FFDAAD 0%, rgba(250, 220, 183, 0.16) 100%);
					height: 400rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					
					.vertical{
						height: 200rpx;
						width: 2rpx;
						background-color: #D3B590;
						margin: 0 80rpx;
					}
					
					.saveMoneyItem{
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						
						.saveMoneyItemTop{
							margin-bottom: 40rpx;
							
							.saveMoneyItemTopNum{
								font-size: 64rpx;
								font-weight: 600;
								color: #F14043;
							}
							
							.saveMoneyItemTopText{
								font-size: 28rpx;
								color: #F14043;
							}
						}
						
						.saveMoneyItemBottom{
							
						}
					}
				}
			}
		}
	}
</style>